<template>
	<view class="big-text" :class="{ 'show-tips': showTip || alwaysShowTips }">
		<textarea
			v-show="!hideText"
			ref="textArea"
			class="text"
			:value="getValue"
			@focus="onFocus"
			@blur="focus = false"
			:style="{ height: height + 'rpx' }"
			:maxlength="maxLength"
			:disable-default-padding="true"
			@input="handler"
			placeholder="请输入美好日记内容..."
			placeholder-class="placeholder"
		></textarea>
		<view id="textView" class="text view">
			<template v-for="(item, index) in getViewValue">
				<view :key="index" :class="{ 'empty-line': item === '' }">{{ item | getItemRealValue }}</view>
			</template>
		</view>
		<view v-show="showTip || alwaysShowTips" class="tips" :class="{ show: (showTip && focus) || alwaysShowTips }">
			<text class="current">{{ getCurrent }}</text>
			<text>/</text>
			<text class="total">{{ getTotal }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		height: { type: Number, default: 46 },
		value: { type: String, default: '' },
		maxLength: { type: Number, default: 120 },
		showTip: { type: Boolean, default: true },
		alwaysShowTips: { type: Boolean, default: false },
		hideText: {type:Boolean, default: false}
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			ratio: 750 / info.windowWidth,
			// height: 46,
			focus: false
		};
	},
	watch: {
		value(val) {
			if (val) {
				this.calcHeight();
			}
		}
	},
	filters: {
		getItemRealValue(item) {
			if (item === '' || item === undefined) {
				return ' ';
			}
			return item;
		}
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		this.textView = query.select('#textView').boundingClientRect(data => {
			let height = data.height * this.ratio;
			this.$emit('update:height', height < 46 ? 46 : height)
		});
		this.calcHeight();
	},
	computed: {
		getValue() {
			return this.value;
		},
		getTotal() {
			return this.maxLength;
		},
		getCurrent() {
			return this.value.length;
		},
		getViewValue() {
			return this.value.split('\n');
		}
	},
	methods: {
		onFocus() {
			this.focus = true;
			// #ifdef H5
			document.activeElement.scrollIntoView();
			document.activeElement.scrollIntoViewIfNeeded();
			setTimeout(() => {
				document.activeElement.scrollIntoView();
				document.activeElement.scrollIntoViewIfNeeded();
			}, 500);
			// #endif
		},
		calcHeight() {
			setTimeout(() => {
				this.textView.exec();
			}, 0);
		},
		handler(e) {
			this.$emit('input', e.detail.value);
			this.$emit('change', e);
		}
	}
};
</script>

<style lang="less" scoped>
.big-text {
	width: 100%;
	position: relative;
	&.show-tips {
		padding-bottom: 45rpx;
	}
	.text {
		position: relative;
		width: 100%;
		word-break: break-all;
		word-wrap: break-word;
		white-space: normal;
		min-height: 46rpx;
		font-size: 26rpx;
		line-height: 46rpx;
		font-weight: 300;
		font-family: PingFangSC-Light, PingFang SC;
	}
	.view {
		position: absolute;
		top: 0;
		z-index: -1;
		visibility: hidden;
		font-family: PingFangSC-Light, PingFang SC;
		/* #ifdef MP-WEIXIN */
		// padding: 0 12rpx;
		/* #endif */
		.empty-line {
			width: 2rpx;
			height: 46rpx;
			display: block;
		}
	}
	uni-textarea {
		font-family: PingFangSC-Light, PingFang SC;
		color: #66645d;
		font-weight: 300;
		word-break: brrak-all;
		word-wrap: break-word;
		padding: 0;
		margin: 0;
		width: 100%;
		font-size: 26rpx;
	}
	.tips {
		text-align: right;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 8rpx;
		color: #a1a1a1;
		position: absolute;
		bottom: 0;
		right: 0;
		display: none;
		.current {
			margin-right: 4rpx;
		}
		.total {
			margin-left: 4rpx;
			font-weight: 500;
		}
		&.show {
			display: block;
		}
	}
	.placeholder {
		color: #a1a1a1;
	}
}
</style>
